<template>
	<BaseContainer class="c-wrap">
		<main class="c-main">
			<ApldTable class="mt10 self-table" v-bind="tableConfig" :data="tableData">
				<template v-slot:Region="{ row }">
					<el-tag color="#0052d9" :dark="true" effect="dark">{{ row.districtName }}</el-tag>
				</template>
			</ApldTable>
		</main>
	</BaseContainer>
</template>

<script setup lang="ts">
import { ApldTable } from '@/components/AplidCrud'
import { onMounted } from 'vue'
import apiMod from '@/apiMod/index'
import { getStore } from '@/utils/store'

const userInfo = getStore('userInfo') || {}

const tableConfig = {
	showIndex: false,
  showSummary:true,
	columns: [
		{
			label: '名称',
			prop: 'Region',
			align: 'left',
		},
		{
			label: '安装智能设备的单位数量',
			prop: 'orgCount',
			align: 'center',
		},
	],
}

if (userInfo.authCity && !userInfo.authArea) {
	tableConfig.columns.push({
		label: '智能设备总数',
		prop: 'equipmentCount',
		align: 'center',
	})
}

const tableData = ref([])

const getInitData = () => {
	tableData.value = []
	apiMod.view_dotEquipment_statistics().then((res) => {
		const data = res.data
		tableData.value = data.map(item=> {
      return {
        ...item,
      }
    }).filter(item=>item.districtName||item.districtName=='总计')
	})
}

onMounted(() => {
	getInitData()
})
</script>

<style scoped lang="scss">
:deep(.date-box > .el-input__wrapper) {
	box-shadow: none;
	background-color: transparent;
}
.c-wrap {
	width: 100%;
	.c-header {
		padding: 5% 20%;
	}
	.c-main {
		padding: 5% 10%;
		background-color: #fff;
		.self-table {
			margin: 0 auto;
			border: 1px solid #dcdcdc;
			border-radius: 10px 10px 0 0;
		}
	}
}
.text-title {
	font-family: 'Microsoft YaHei Bold';
	font-weight: 700;
	font-size: 16px;
	text-align: left;
	color: #0052d9;
}
</style>
